<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
        }

        table td {
            border: 1px solid #ccc;
            height: 30px;
            text-align: center;
        }

        tr td {
            width: 100px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>使用创建dom节点动态生成表格</h1>
        <label for="">行：</label>
        <input type="text" id="row">
        <label for="">列：</label>
        <input type="text" id="col">
        <input type="button" id="btn" value="生成">
        <div id="output">
            <!-- <table>
                <tbody>
                    <tr>
                        <td>td1</td>
                        <td>浮动法</td>

                    </tr>
                </tbody>
            </table> -->
        </div>
    </div>
    <script>
        // 获取行和列的标签
        var row_r = document.querySelector('#row')
        var col_c = document.querySelector('#col')
        var btn = document.querySelector('#btn')
        var output = document.querySelector('#output');
        //获取行和列的value值
        // 点击button生成table
        btn.onclick = function () {
            var n1 = row_r.value;
            var n2 = col_c.value;
            //创建table标签
            var table = document.createElement('table')
            // 创建tbody、td 、tr 
            var tbody = document.createElement('tbody')
            var td = document.createElement('td')
            // var tr = document.createElement('tr');
            table.appendChild(tbody)

            //循环行和列
            for (var i = 0; i < n1; i++) {
                // 创建tr         
                var tr = document.createElement('tr');

                for (var j = 0; j < n2; j++) {
                    // 创建td

                    var td = document.createElement('td');
                    tr.appendChild(td);
                }
                var td1 = document.createElement('td')
                var td2 = tr.firstElementChild
                tr.insertBefore(td1, td2);
                td1.innerHTML = 'id' + (i + 1);
                var btn1 = document.createElement('button')
                btn1.innerHTML = '删除'
                var btn2 = document.createElement('button')
                btn2.innerHTML = '复制'
                var td3 = tr.lastElementChild;
                td3.appendChild(btn1);
                td3.appendChild(btn2);
                tbody.appendChild(tr);



                btn2.onclick = function () {
                    var res = tr.cloneNode(true);
                    tbody.appendChild(res)
                }
                btn1.onclick = function () {
                    tbody.removeChild(tbody.firstElementChild)
                }
            }
            // 将table添加到output中
            output.appendChild(table);

        }

    </script>
</body>

</html>